<template>
	<!-- 顶部选项卡 -->
	<scroll-view  scroll-x="true">
		<view v-for="(item,index) in barNameList" :key="item.id" 
			class="tabName" :data-current="index"
			@click="ontabtap">
			<text class="tabName_text" :class="tabIndex_a == index?'active_text':''">{{item.name}}</text>
		</view>
		<view class="button" > 
			<uni-icons type="button" size="30" ></uni-icons>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "index-tabbar",
		props: {
			barNameList: Array,
			tabIndex: {
				type:Number,
				default:0
			}
		},
		data() {
			return {

				tabIndex_a : this.tabIndex
			}
		},
		methods: {
			// scroll-view 点击 tab 时 改变下标
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			switchTab(index) {
				if (this.tabIndex_a == index) {
					return
				}
				this.tabIndex_a = index;
			}
		}
	}
</script>

<style>
	.tabName {
		text-align: center;
		width: 17%;
		display: inline-block;
		height: 70rpx;
		line-height: 70rpx;
		white-space: nowrap;
	}
	
	.tabName_text {
		display: inline-block;
		width: 100%;
		color: #C0C0C0;
	}
	
	.active_text {
		// background-color: #FDDD9B;
		color: #000;
		font-weight: 600;
	}
</style>
